<template>
  <div>
    <el-card>
      <el-form inline>
        <el-form-item label="分类名称:" class="mgb-0">
          <el-input v-model="ename"></el-input>
        </el-form-item>
        <el-form-item label="分类编码:" class="mgb-0">
          <el-input v-model="enumber"></el-input>
        </el-form-item>
        <el-form-item class="mgb-0">
          <el-button type="primary" icon="el-icon-search" @click="searchData"></el-button>
          <el-button type="success" icon="el-icon-refresh" @click="clearData"></el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="margin-top: 10px">
      <div style="margin-bottom: 10px">
        <el-button type="primary" @click="openGroupAdd">新增</el-button>
      </div>

      <el-table border :data="dataList" v-loading="tableLoading">
        <el-table-column label="序号" align="center" type="index" width="50"></el-table-column>
        <el-table-column label="分类名称" prop="ename" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="分类编码" prop="enumber" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="openGroupDetail(scope.row.eid)">详情</el-button>
            <el-button type="text" @click="openGroupEdit(scope.row.eid)">编辑</el-button>
            <el-button type="text" style="color: red" @click="deleteGroup(scope.row.eid)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="float:right; margin: 10px 0;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5,10, 15, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        prev-text="上一页" next-text="下一页"
        :total="totalRows">
      </el-pagination>
    </el-card>
    <!--新增-->
    <equipment-addEdit v-if="isShowGroupAddEdit" :groupId="groupId" @close="closeGroupAddEdit" @notRefresh="notRefresh"></equipment-addEdit>
    <!--详情-->
    <equipment-detail v-if="isShowGroupDetail" :groupId="groupId" @close="closeGroupDetail"></equipment-detail>
  </div>

</template>

<script>
  import EquipmentCategoryApi from "@/api/module/EquipmentCategoryApi";
  export default {
      name: 'equipmentGroup',
      components: {
          equipmentAddEdit: resolve => require(['./equipment/equipment_addEdit'], resolve),
          equipmentDetail: resolve => require(['./equipment/equipment_detail'], resolve),
      },
      data () {
        return {
          ename: '',
          enumber: '',
          tableLoading: false,
          dataList: [],
          page: 1, //当前页面
          pageSize: 10, // 当前页数
          totalRows: 0, // 总条数
          groupId: 0,
          isShowGroupAdd: false,
          isShowGroupAddEdit: false,
          isShowGroupDetail: false,
          http:new EquipmentCategoryApi(),
        }
      },
      created () {
        this.getData()
      },
      methods: {
        //获取表格数据源
        getData () {
          this.tableLoading = true
          let data = {
            ename: this.ename,
            enumber: this.enumber,
            pageSize: this.pageSize,
            page: this.page
          }
          this.http.queryListPage(data).then(res => {
            this.dataList = res.data.rows
            this.page = res.data.page
            this.pageSize = res.data.pageSize
            this.totalRows = res.data.totalRows
            this.tableLoading = false
            console.log("分组 queryListPage")
            console.log(res.data.rows)
          })
        },
        // 当前页码修改时
        handleCurrentChange (page) {
          this.page = page
          this.getData()
        },
        // 当前页数修改时
        handleSizeChange (pageSize) {
          this.pageSize = pageSize
          this.getData()
        },
        //模糊查询
        searchData () {
          this.page = 1
          this.getData()

        },
        clearData () {
          this.ename = ''
          this.enumber = ''
        },
        //打开新增弹窗
        openGroupAdd () {
          this.groupId = ''
          this.isShowGroupAddEdit = true
        },
        //打开编辑弹窗
        openGroupEdit (id) {
          this.groupId = id
          this.isShowGroupAddEdit = true
        },
        //关闭新增编辑弹窗
        closeGroupAddEdit () {
          this.isShowGroupAddEdit = false
          this.groupId = ''
          this.getData()
        },
        closeGroupAdd () {
          this.isShowGroupAdd = false
          this.groupId = ''
          this.getData()
        },
        notRefresh () {
          this.isShowGroupAddEdit = false
          this.groupId = ''
        },
        //打开详情弹窗
        openGroupDetail (id) {
          this.groupId = id
          this.isShowGroupDetail = true
        },
        //关闭详情弹窗
        closeGroupDetail () {
          this.groupId = ''
          this.isShowGroupDetail = false
        },
        //删除
        deleteGroup (groupId) {
          this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const loading = this.$loading({
              lock: true,
              text: `删除中，请耐心等待.....`,
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            })
            this.http.delete({ "id": groupId }).then(res => {
              this.$tie.showSuccess(res.message)
              loading.close()
              this.getData()
            }).catch(e => {
              loading.close()
            })
          }).catch(() => {
          })
        },
      },
    }
</script>

<style scoped>

</style>
